<template>
  <div class="village-info">
    <template v-if="!isMobile && systemInfo.system_logo">
      <img
        class="system-logo"
        :src="systemInfo.system_logo"
        @click="reloadPage"
      />
      <a-divider
        type="vertical"
        style="
          border-color: rgba(255, 255, 255, 0.2);
          height: 20px;
          margin: 0 10px;
        "
      />
    </template>
    <div class="info">
      <template v-if="!isMobile">
        <img
          v-if="orgInfo.org_avatar"
          class="company-logo"
          :src="orgInfo.org_avatar"
        />
        <img v-else class="company-logo" src="../images/xiangmu.png" />
      </template>

      <div class="text">
        <div class="company">
          {{ orgInfo.org_name }}
        </div>
        <div class="village">
          <span>{{ currentVillage.name || "--" }}</span>
          <SwapOutlined
            class="change-icon"
            @click.stop="VillageChangeHandler"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { computed, defineComponent, watch } from "vue";
import { SwapOutlined } from "@ant-design/icons-vue";
import store from "../../../store";
import request from "../../../common/utils/request";
import { message } from "ant-design-vue";

export default defineComponent({
  name: "VillageInfo",
  components: { SwapOutlined },
  setup(props, { emit }) {
    const systemInfo = computed(() => store.getters.basicConfig);
    const currentVillage = computed(() => store.getters.datavCurVillage);
    const orgInfo = computed(() => store.getters.orgInfo);

    const VillageChangeHandler = () => {
      emit("change");
    };

    let msg_key = "message";
    const reloadPage = () => {
      // message.loading({ content: "正在请求刷新...", key: msg_key });
      request
        .post("/datav", "/index/refreshInit", {
          data: {
            village_id: currentVillage.value.id,
            build_id: store.getters.datavCurBuilding.id || 0,
            menu: store.getters.datavCurMenu,
            preview: store.getters.dataVPreview,
            fd: store.getters.dataVFD,
          },
        })
        .then((res) => {
          message.success({
            content: "刷新指令下发成功~",
            // key: msg_key,
            duration: 2.5,
          });
          // emit("refresh");
        });
    };

    const isMobile = computed(() => store.getters.dataVMobile);

    return {
      systemInfo,
      orgInfo,
      currentVillage,
      isMobile,
      VillageChangeHandler,
      reloadPage,
    };
  },
});
</script>
<style lang="less" scoped>
@import "../styles/common.less";
.village-info {
  height: 100%;
  display: flex;
  align-items: center;
  font-size: 1.2rem;
  pointer-events: all;
  .system-logo {
    height: 100%;
    max-width: 100px;
    object-fit: contain;
    cursor: pointer;
  }
  .info {
    display: flex;
    align-items: center;
    line-height: 2rem;
    .company-logo {
      width: 3.2rem;
      height: 3.2rem;
      border-radius: 0.4rem;
      margin-right: 1.2rem;
      object-fit: contain;
    }
    .village {
      color: #fff;
      .change-icon {
        margin-left: 0.6rem;
        padding: 0.6rem;
        border-radius: 50%;
        cursor: pointer;
        transition: all 0.2s;
        &:hover {
          background: @lightWhite;
          color: @primaryColor;
        }
      }
    }
  }
}
</style>
